﻿@model NB.Apps.EFMigrationsManager.Models.EFMigrationDetails

@{
  Layout = null;
  /**/
  ViewBag.Title = "DB Maintenance";
  ViewBag.Title = Model.IsRollback ? "Restore Migration(s)" : "Update Database";
  var statusMessage = TempData["StatusMessage"] as string;

  var disclaimerMessage = Model.IsRollback ? "Disclaimer: Restoring to previous Target Migration may break the application." :
                              "Disclaimer: The latest Target Migration must be applied to continue using this application.";

  var noAvailableTargetMigrationsMessage = Model.IsRollback ? "No migration(s) available to restore."
      : "Latest migration was applied.";

}

<!DOCTYPE html>
<html lang="en-us" id="lock-page">
<head>
  <meta charset="utf-8">
  <title> SmartAdmin</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <!-- #CSS Links -->
  <!-- Basic Styles -->
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/font-awesome.css">

  <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/smartadmin-production-plugins.css">
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/smartadmin-production.css">
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/smartadmin-skins.css">

  <!-- SmartAdmin RTL Support -->
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/smartadmin-rtl.css">

  <!-- We recommend you use "your_style.css" to override SmartAdmin
       specific styles this will also ensure you retrain your customization with each SmartAdmin update.
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/your_style.css"> -->
  <!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/demo.css">

  <!-- page related CSS -->
  <link rel="stylesheet" type="text/css" media="screen" href="/Content/css/lockscreen.css">

  <!-- #FAVICONS -->
  <link rel="shortcut icon" href="/Content/img/favicon/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/Content/img/favicon/favicon.ico" type="image/x-icon">

  <!-- #GOOGLE FONT -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">

  <!-- #APP SCREEN / ICONS -->
  <!-- Specifying a Webpage Icon for Web Clip
       Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
  <link rel="apple-touch-icon" href="/Content/img/splash/sptouch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/Content/img/splash/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/Content/img/splash/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/Content/img/splash/touch-icon-ipad-retina.png">

  <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- Startup image for web apps -->
  <link rel="apple-touch-startup-image" href="/Content/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
  <link rel="apple-touch-startup-image" href="/Content/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
  <link rel="apple-touch-startup-image" href="/Content/img/splash/iphone.png" media="screen and (max-device-width: 320px)">
  <style>
    .selectTargetMigration {
      min-width: 250px;
    }

    .dialogVisible {
      opacity: 0.4;
      pointer-events: none;
    }

    #confirmationDailogContainer .dialogBody {
      height: 100%;
      max-height: 150px;
      overflow-y: auto;
    }

    #confirmationDailogContainer {
      display: none;
      background-color: #eee;
      border-radius: 2px;
      border: 1px solid #aaa;
      padding: 6px 8px 8px;
      box-sizing: border-box;
      text-align: center;
      z-index: 999999999999;
      transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .message {
      text-align: left;
      margin-bottom: 8px;
      margin-left: 8px;
    }

    .dataLossWarning {
      color: #b94a48;
    }

    #confirmationDailogContainer, .centerPosition {
      position: fixed;
      width: 450px;
      left: 40%;
      top: 40%;
      margin-left: -150px;
      margin-top: -150px;
      box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
    }

    .loader {
      margin-left: 150px;
      margin-top: -50px;
      position: fixed;
      display: none;
      border: 8px solid #f3f3f3;
      border-radius: 50%;
      border-top: 8px solid blue;
      border-bottom: 8px solid blue;
      width: 80px;
      height: 80px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @@-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @@keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>

  <div id="main" role="main">
    <!-- MAIN CONTENT -->
    <div id="content" class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
          <h1 class="page-title txt-color-blueDark">
            <i class="fa fa-database fa-fw "></i>
            更新数据库版本升级
          </h1>
        </div>
        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">

        </div>
      </div>
      <!-- widget grid -->
      <section id="widget-grid" class="animated flipInY">
        <div class="row">
          <div class="col-md-8 col-sm-8">
            @if (!string.IsNullOrEmpty(statusMessage))
            {
              <div class="alert alert-success alert-dismissable" style="margin-bottom: 0px;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                @statusMessage
              </div>
            }
            else
            {
              if (!Model.HasTargetMigrationExists)
              {
                <div class="alert alert-success alert-dismissable"  style="margin-bottom: 0px;">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                  @noAvailableTargetMigrationsMessage
                </div>
              }
              else
              {
                <div class="alert alert-warning alert-dismissable">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                  @disclaimerMessage
                </div>
              }
            }

            <div class="container-fluid well">
              @using (Html.BeginForm("Publish", "EFMigrationsManager", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { id = "efmigrationsmanager", role = "form" }))
              {
                @Html.AntiForgeryToken()

                <div class="form-horizontal formContainer">
                  @Html.HiddenFor(model => model.IsRollback)
                  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                  <div class="form-group">
                    @Html.LabelFor(model => model.CurrentMigrationDisplayValue, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                      @Html.TextBoxFor(model => model.CurrentMigrationDisplayValue, new { @class = "form-control", disabled = "disabled" })
                    </div>
                  </div>
                  <div class="form-group form-inline">
                    @Html.LabelFor(model => model.TargetMigration, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                      @Html.DropDownListFor(model => model.TargetMigration, Model.Migrations, new { @class = "form-control selectTargetMigration" })
                      @if (Model.IsRollback)
                      {
                        @Html.ActionLink("Show Pending Migration(s)", "Publish", null, new { @class = "btn btn-raised btn-default btn-primary" })
                      }
                      else
                      {
                        @Html.ActionLink("Show Previous Migration(s)", "Publish", new { isRollback = true }, new { @class = "btn btn-raised btn-default btn-primary" })
                      }
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                      <button class="btn btn-raised btn-primary btn-default btnUpdateDatabase @(!Model.HasTargetMigrationExists ? "disabled" : "")"
                              title="Update Database" type="button">
                        Apply Migration(s)
                        <div class="ripple-container"></div>
                      </button>
                      <div class="loader"></div>
                    </div>
                  </div>

                </div>

                <div id="confirmationDailogContainer" style="display:none">

                  <div class="row message dialogHeader">
                    @if (Model.IsRollback)
                    {
                      <div class="dataLossWarning">Data loss can occur when restoring previous migration(s)</div>
                    }
                    <h4>The following migration(s) will be @(Model.IsRollback ? "restored" : "applied"):</h4>
                  </div>
                  <div class="dialogBody">
                    <ul class="migrationsToApply"></ul>
                  </div>
                  <div class="dialogFooter">
                    <div class="row message">
                      Are you sure you want to continue?
                    </div>

                    <div class="row message">
                      <button class="btn btn-raised btn-primary btn-default btnYes" type="button">
                        <span class="glyphicon glyphicon-ok"></span>
                        Yes
                      </button>
                      <button class="btn btn-raised btn-primary btn-default btnNo" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                        No
                      </button>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <script src="~/Scripts/libs/jquery-3.4.1.min.js"></script>

  <script type="text/javascript">
        function doConfirm(yesFn, noFn) {
            var confirmationDailogContainerElement = $("#confirmationDailogContainer");
            var formContainer = $(".formContainer");
            var migrationsToApplyElement = $('.migrationsToApply', confirmationDailogContainerElement);

            migrationsToApplyElement.empty();

            $.each($( "#TargetMigration option"), function () {
                migrationsToApplyElement.append('<li class="message">' + this.text.trim() + '</li>');
                if (this.selected) {
                    return false;
                }
            });
            if ('@Model.IsRollback' == 'True')
            {
                migrationsToApplyElement.prepend('<li class="message">' + '@Model.CurrentMigrationDisplayValue' + '</li>');
                $('li:last-child', migrationsToApplyElement).remove();
            }

            var modalDialogClassName = 'dialogVisible'
            confirmationDailogContainerElement.find(".btnYes,.btnNo").unbind().click(function () {
                formContainer.removeClass(modalDialogClassName);
                confirmationDailogContainerElement.hide();
            });
            confirmationDailogContainerElement.find(".btnYes").click(yesFn);
            confirmationDailogContainerElement.find(".btnNo").click(noFn);
            formContainer.addClass(modalDialogClassName);

            confirmationDailogContainerElement.show();

            return false;
        }
        function bindUpdateDatabaseClickEvent() {
          $(".btnUpdateDatabase").click(function () {

                if ('@Model.HasTargetMigrationExists' === 'True') {
                    doConfirm(function yes() {
                        $('.loader').show();
                         $('#efmigrationsmanager').submit();
                    }, function no() {
                    });
                }
            });
        }

        $(document).ready(bindUpdateDatabaseClickEvent); // Use this line and comment below one. Jquery should be loaded by this time.
        setTimeout(function () {
            var removeAllMigrationsItem = document.querySelector('#TargetMigration option[value="0"]');
            if (removeAllMigrationsItem){
                removeAllMigrationsItem.style.backgroundColor = "#fcf8e3";
            }
            bindUpdateDatabaseClickEvent();
        }, 500);
  </script>

</body>
</html>